<template>
  <div class="upload-global" v-if="visible">
    <div class="upload-head">
      <p class="left mr20">上传完成<span class="ml20">({{already}}/{{totalItem}})</span></p>
      <p class="right">
        <i class="iconfont icon-shrink" v-tooltip="'收起'" @click="isExpand = false" v-if="isExpand"></i>
        <i class="iconfont icon-zhankai" v-tooltip="'展开'" @click="isExpand = true" v-if="!isExpand"></i>
        <i class="iconfont icon-x ml10" v-tooltip="'关闭'" @click="closeUpload"></i>
      </p>
    </div>
    <div class="upload-content p20" v-if="isExpand">
      <div v-bar style="height: 350px">
        <div>
          <table>
            <tr>
              <td width="50%"><small>文件名</small></td>
              <td width="20%"><small>大小</small></td>
              <td width="20%"><small>状态</small></td>
              <td width="10%"><small>操作</small></td>
            </tr>
            <tr v-for="item in uploadFiles">
              <td class="upload-file">
                <img v-if="item.blob" :src="item.blob"/>
                <div v-else>
                  <div class="upload-filecom left">{{item.fileName | fileType}}</div>
                  <p class="left ml10 upload-fileName">{{item.fileName}}</p>
                </div>
              </td>
              <td>{{item.fileSize / 1024 | formatSize}}</td>
              <td>
                <div v-if="item.progressMD5 > 0 && item.progressMD5 !== 100">
                  <p>正在验证MD5...</p>
                  <div class="upload-progress"><div :style="{width: `${item.progressMD5}%`}"></div></div>
                </div>
                <div v-if="item.progress > 0 && item.progress !== 100 && !item.error">
                  <p>正在上传...</p>
                  <div class="upload-progress"><div :style="{width: `${item.progress}%`}"></div></div>
                </div>
                <div v-if="item.error" class="upload-error">
                  <i class="iconfont icon-error mr10"></i>
                  <span>{{item.error}}</span>
                </div>
                <div v-if="item.success" class="upload-success">
                  <i class="iconfont icon-success mr10"></i>
                  <span>上传成功</span>
                </div>
              </td>
              <td class="upload-i">
                <i class="iconfont icon-x pointer" v-tooltip="'取消上传'" v-if="!item.error" @click="cancelUpload(item)"></i>
                <i class="iconfont icon-upload pointer" v-tooltip="'重新上传'" v-if="item.error" @click="resetUpload(item)"></i>
                <!--<b><i class="iconfont icon-zanting pointer" v-tooltip="'暂停上传'" v-if="!item.isPause" @click="pauseUpload(item)"></i></b>-->
                <!--<b><i class="iconfont icon-jixushangchuan pointer bold" v-tooltip="'继续上传'" v-if="item.isPause" @click="continueUpload(item)"></i></b>-->
              </td>
            </tr>
          </table>
        </div>
      </div>
      <p class="color t-right" @click="uploadKeyServer">确定</p>
    </div>
  </div>
</template>
<script>
  import oss from '../mixin.js'
  export default {
    name: 'upload',
    mixins: [oss],
    data () {
      return {
        visible: false,
        isExpand: true,
        already: 0,
        totalItem: 0,
        uploadFiles: [],
        target: null,
        length: 0,
        type: [],
        options: {
          type: [],
          length: 999,
          isSimple: false, // 不显示右下角上传进度
          success: null,
          fileOwnerType: 2, // 上传人 1：个人 2：企业
          subSystem: 2 // 上传方 1：CCBIM 2：公司内部 3 第三方
        }
      }
    },
    filters: {
      fileType (value) {
        return value.slice(value.lastIndexOf('.') + 1)
      }
    },
    methods: {
      upload (event, options) {
        this.setOption(event, options)
        const {files} = event.target
        this.filter(files).then(() => {
          this.visible = true
          this.totalItem += files.length
          this.continueUpload(files, null, event.target)
        })
      },
      simpleUpload (event, options) {
        return new Promise(resolve => {
          this.setOption(event, options)
          const {files} = event.target
          this.filter(files).then(() => {
            this.totalItem += files.length
            this.continueUpload(files, resolve)
          })
        })
      },
      setOption (event, options) {
        this.target = event.target
        this.options = {...this.options, ...options}
        this.length = this.options.length
        this.type = this.options.type
        this.subSystem = this.options.subSystem
        this.fileOwnerType = this.options.fileOwnerType
      },
      // 关闭上传
      closeUpload () {
        if (this.uploadFiles.length > 0) {
          this.$MessageBox({
            showClose: true,
            message: '还没有确定上传文件，确定关闭？',
            type: 'info',
            confirmHanler: () => {
              this.reset()
            }
          })
        } else {
          this.visible = false
        }
      },
      // 暂停上传
      pauseUpload (file) {
        file.isPause = true
        file.clientOSS.cancel()
      },
      // 继续上传
      // continueUpload (file) {
      //   file.isPause = false
      // },
      // 确定把文件key传给服务端
      uploadKeyServer () {
        if (this.uploadFiles.length > 0) {
          if (this.uploadFiles.every(item => item.success)) {
            this.options.success(this.uploadFiles.map(item => item.fileUuid), this.uploadFiles)
            this.reset()
          } else {
            this.$message.warning('请等待所有文件上传完成,可以先去其它页面哦')
          }
        } else {
          this.$message.warning('请选择文件上传')
        }
      },
      reset () {
        this.uploadFiles.forEach(file => {
          if (file.clientOSS) {
            file.clientOSS.cancel()
          }
        })
        this.uploadFiles = []
        this.target.value = ''
        this.totalItem = 0
        this.already = 0
        this.visible = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .upload-global{
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: #fff;
    z-index: 9;
    @include shadow;
    .upload-head{
      height: 50px;
      padding: 0 20px;
      line-height: 50px;
      font-size: $font-size-base;
      background: $color;
      color: #fff;
      i{
        font-size: 20px;
        cursor: pointer;
        &:hover{
          color: $red;
        }
      }
    }
    .upload-content{
      width: 600px;
      height: 365px;
      table{
        width: 100%;
        th{
          font-weight: normal;
        }
        .upload-file{
          line-height: 40px;
          > img{
            width: 40px;
            height: 40px;
          }
          .upload-filecom{
            width: 40px;
            height: 40px;
            text-align: center;
            background: $red;
            color: #fff;
            box-sizing: border-box;
            @include ellipsis
          }
          .upload-fileName{
            width: 200px;
            @include ellipsis
          }
        }
        .upload-progress{
          margin-top: 3px;
          height: 10px;
          border-radius: 5px;
          border: 1px $color-line solid;
          overflow: hidden;
          width: 90%;
          >div{
            background: $color;
            height: 100%;
          }
        }
        .upload-error{
          color: $red;
          i{
            color: $red;
          }
        }
        .upload-success{
          color: $color;
          i{
            color: $color;
          }
        }
        .upload-i{
          i{
            color: $color-grid;
            font-size: 20px;
            &:hover{
              color: $color;
            }
          }
        }
      }
    }
  }
</style>
